<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2024-11-20 14:15:54
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-14 11:18:50
 * @FilePath: /XMate-h5/src/views/myXmate/components/chooseTeamNavBar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="flex flex-row pt-4 pb-3 px-5 items-center bg-white overflow-x-auto"
  >
    <div
      class="flex flex-row items-center mr-2 bg-white"
      v-for="(item, index) in pageStack"
      :key="item"
      @click="emits('clickItem', item, index)"
    >
      <div
        :class="`mr-1 text-sm text-nowrap ${index === pageStack.length - 1 ? 'text-[#595959]' : 'text-yxt-blue'}`"
      >
        {{ item.name }}
      </div>
      <van-icon name="arrow" color="#E9E9E9" size="14" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

defineProps({
  pageStack: {
    type: Array,
    default: () => [
      { name: "首页" },
      { name: "我的团队" },
      { name: "团队管理" }
    ]
  }
});

const emits = defineEmits(["clickItem"]);
</script>

<style lang="less" scoped>
* {
  scrollbar-width: none; /* 隐藏 Firefox 的滚动条 */
  -ms-overflow-style: none; /* 隐藏 IE 和 Edge 的滚动条 */
}
</style>
